<!-- 人才分析 -->
<template>
  <div class="talentAnalysis">
    <van-nav-bar title="人才分析" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div id="chart1" class="charts"></div>
    <div id="chart3" class="charts"></div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import * as echarts from "echarts"; //引入图表库
export default {
  name: "talentAnalysis",
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const data = reactive({
      dataset1: {
        dimensions: [
          "department",
          "Junior high school",
          "High school",
          "Undergraduate",
          "Master",
        ],
        source: [],
      },
      option2: {
        types: [],
        values: [],
      },
    });
    onMounted(() => {
      dataInit();
    });
    const refData = toRefs(data);
    //返回按钮
    const onClickLeft = () => {
      router.push({ path: "/analysis" });
    };
    //初始化图表
    const echartInit = () => {
      //按级别统计
      var myChart1 = echarts.init(document.getElementById("chart1"));
      //按职能统计
      var myChart3 = echarts.init(document.getElementById("chart3"));
      let option1 = {
        legend: { type: "scroll", top: 0 },
        tooltip: {},
        dataset: data.dataset1,
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
          name: "部门",
        },
        yAxis: { name: "人数" },
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      let option3 = {
        tooltip: {
          trigger: "item",
        },
        title: {
          text: "不同学历平均薪资比较",
          left: "center",
          top: "3%",
          textStyle: {
            fontSize: "14",
          },
        },
        xAxis: {
          type: "category",
          data: data.option2.types,
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: 45, //60度角倾斜显示
          },
          name: "学历",
        },
        yAxis: {
          type: "value",
          name: "平均薪资/万元",
        },
        series: [
          {
            data: data.option2.values,
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart3.setOption(option3);
    };
    //获取后台信息
    const dataInit = () => {
      let proms = [proxy.$api.getEducation(), proxy.$api.getEduAvgSalary()];
      Promise.all(proms)
        .then((arr) => {
          data.dataset1.source = dealData(arr[0].obj);
          data.option2.types = arr[1].obj.types;
          data.option2.values = arr[1].obj.values;
          echartInit();
        })
        .catch((e) => {
          proxy.$Toast.fail("请求错误" + e);
        });
    };
    //处理第一个图表数据
    const dealData = (arr) => {
      let res = [];
      arr.forEach((e) => {
        res.push({
          department: e.department,
          "Junior high school": e.edu1,
          "High school": e.edu2,
          Undergraduate: e.edu3,
          Master: e.edu4,
        });
      });
      return res;
    };
    return {
      ...refData,
      onClickLeft,
      echartInit,
      dataInit,
      dealData,
    };
  },
};
</script>
<style scoped lang="scss">
.talentAnalysis {
  background-color: #f5f4f9;
}
// #chart3 {
//   height: 250px;
// }
</style>
